<template>
  <div class="companyMailList-container">
    <div class="setContent">
      <div class="title">通讯录信息</div>
      <div class="cont">
        <div class="hTit">企业通讯录信息</div>
        <div class="itemCont">
          <span class="item" v-for="item in initData" :key="item.id">
            <span class="itemName"> {{item.name}} </span>
            <span class="hovShow">{{item.name}}</span>
            <div class="close" v-if="item.type == 'dynamic'" @click="delFont(item)">
              <img src="./../../assets/img/close.png" width="14" height="14px" style="border-radius: 100%" alt="">
            </div>
          </span>
          <span class="item addItem" @click="addFont"> + 添加字段 </span>
        </div>
        <div class="hTit">个人详情页展示的字段</div>
        <div class="itemCont">
          <div class="fontCont" >
            <el-checkbox-group v-model="checkList" >
              <el-checkbox v-for="item in initData" :key="item.id" :class="{longHov: item.name.length > 5}" :label="item.id" @change="changeFontShow(item)">
                <span class="itemName" style="width: 80px;height: 18px;">{{item.name}}</span>
                <span class="hovShow">{{item.name}}</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="phoneShow">
            <div class="phoneHead"></div>
            <div class="phoneCont" v-if="showData.length>0">
              <div class="tit">企业信息</div>
              <div class="contBox">
                <div class="items" v-for="item in showData" :key="item.id">
                  <p class="lab">{{item.name}}</p>
                  <p class="inp">{{`请输入${item.name}`}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div></div>
      </div>
    </div>
    <el-dialog
      title="添加字段"
      center
      :visible.sync="dialogVisible"
      width="30%">
      <span>字段名称：<input type="text" class="fontName" v-model="addFontValue" placeholder="请输入字段名"></span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addFontSubmit" style="background: #3345ff" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
        name: 'Dashboard',
        data() {
            return {
                loading: true,
                dialogVisible: false,
                addFontValue: '',
                checkList: [],
                showData: [],
                initData: []
            }
        },
        computed: {
            ...mapGetters([
                'name'
            ])
        },
        created(){
          this.init()
        },
        methods: {
            init(){
                this.$store.dispatch('company/getCompanySetAct').then((res) => {
                    this.initData = res
                    let arr = []
                    res.map(n => {
                        if (n.status == 1) {
                            arr.push(n.id)
                        }
                    })
                    this.checkList = arr
                    this.showDataComputed()
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            addFont(){
                this.dialogVisible = true
            },
            delFont(row){
                this.$store.dispatch('company/delCompanyFontAct',{id:row.id}).then((res) => {
                    this.$message.success('字段删除成功！');
                    this.init()
                }).catch(() => {
                    this.$message.error('数据提交失败！');
                    this.dialogVisible = false
                })
            },
            addFontSubmit(){
                if (this.addFontValue == ''){
                    this.$message.error('字段名称不能为空！');
                    return false
                }
                this.$store.dispatch('company/addCompanyFontAct', {name:this.addFontValue}).then((res) => {
                    this.$message.success('字段添加成功！');
                    this.init()
                    this.dialogVisible = false
                }).catch(() => {
                    this.$message.error('数据提交失败！');
                    this.dialogVisible = false
                })
            },
            handleSelectionChange(val) {
                let n = val.filter(item => !this.multipleSelection.includes(item));
                console.log(n); //本次新增的项
                this.multipleSelection = val;
            },
            changeFontShow(val){
                console.log(val)
                this.showDataComputed()
                this.$store.dispatch('company/putCompanyFontAct', {id:val.id,type:val.type,name:val.name,status:Math.abs(val.status-1)}).then((res) => {
                    this.init()
                    this.dialogVisible = false
                }).catch(() => {
                    this.$message.error('数据提交失败！');
                    this.dialogVisible = false
                })
            },
            showDataComputed(){
                let newArr = []
                this.initData.map(n => {
                    this.checkList.map(h=> {
                        if (n.id == h){
                             newArr.push(n)
                        }
                    })
                })
                this.showData = newArr
            }
        }
    }
</script>
<style lang="scss">
  .companyMailList-container{
    .fontCont .el-checkbox__input{
      position: relative;
      top:-4px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color:#3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#000;
    }
    .el-checkbox{
      width: 110px;
      margin: 5px 0;
    }
  }
</style>
<style lang="scss" scoped>
  .companyMailList {
    &-container {
      .setContent {
        .title {
          padding: 0 15px;
          text-align: center;
          line-height: 40px;
          background: #eceffc;
        }
        .cont {
          padding: 20px;
          .hTit{
            margin-bottom: 10px;
            padding-bottom: 10px;
            &:before{
              content: '';
              display: inline-block;
              position: relative;
              top:-1px;
              width: 10px;
              height: 10px;
              margin-right: 10px;
              background: #3345ff;
            }
          }
          .itemCont{
            display: flex;
            flex-wrap: wrap;
            padding: 0 10px;
            margin-bottom: 15px;
              .item{
                position: relative;
                margin: 10px;
                background: #fff;
                width: 120px;
                text-align: center;
                line-height: 40px;
                border-radius: 6px;
                box-shadow: 2px 2px 10px #ccc;
                .close{
                  display: none;
                  position: absolute;
                  line-height: 12px;
                  width: 14px;
                  height: 14px;
                  text-align: center;
                  color: #fff;
                  font-size: 14px;
                  right: -3px;
                  top: -2px;
                  cursor: pointer;
                }
                &:hover .close{
                  display: block;
                }
              }
            .itemName{
              display: inline-block;
              width: 110px;
              height: 30px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            .longHov:hover .hovShow{
              display: inline-block;
            }
            .hovShow{
              display: none;
              position: absolute;
              text-align: center;
              left: 0;
              top: -45px;
              border-radius: 5px;
              padding: 10px;
              min-width: 120px;
              background: #fff;
              border:solid 1px #f4f4f4;
              z-index: 99;
            }
            .addItem{
              background: #3345ff;
              color:#fff;
              cursor:pointer;
            }
            .fontCont{
              flex: 1;
            }
            .phoneShow{
              width: 222px;
              height: 440px;
              background: url('./../../assets/img/phoneBg.png');
              .phoneHead{
                padding: 0 20px;
                height: 162px;
              }
              .phoneCont{
                padding:0 15px;
                font-size: 12px;
                color: #a5a5a8;
                .tit{
                    line-height: 25px;
                     padding: 0 10px;
                }
                .contBox{
                  height: 225px;
                  overflow: scroll;
                }
                .items{
                  border-bottom: solid 1px #f4f4f4;
                  font-size: 10px;
                  padding: 0 5px;
                  line-height: 23px;
                  p{
                    margin: 0;
                    padding: 0;
                  }
                }
              }
            }
          }
        }
      }
      .fontName{
        font-size: 14px;
        padding: 4px 10px;
        border-radius: 3px;
        border: solid 1px #d3d3d3;
      }
    }
  }
</style>
